$sizes: (
    xxs: 2px,
    xs: 4px,
    s: 8px,
    m: 16px,
    l: 24px,
    xl: 32px,
    xxl: 64px,
    xxxl: 128px,
);

.h{
    display: flex;
    align-items: center;
}
.v{
    display: flex;
    flex-direction: column;
}
@each $key, $value in $sizes{
  .h-#{$key}{
    &>*+*{
      margin-left: $value;
    }
  }
  .v-#{$key}{
    &>*+*{
      margin-top: $value !important;
    }
  }
  .p-#{$key}{
    padding: $value;
  }
}

.f-1{
  flex: 1;
  overflow: hidden;
}